<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('商户注销')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="saveUpdateBank">
        <input type="hidden" name="agentNum" th:value="${ai?.agentNum}" class="form-control"/>
        <input type="hidden" name="id" th:value="${accounts?.id}" class="form-control"/>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">开户人名称：</label>
            <div class="col-sm-8">
                <input type="text" name="screenName" readonly id="screenName" th:value="${accounts?.screenName}"
                       class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">身份证号码：</label>
            <div class="col-sm-8">
                <input type="text" name="screenIdnum" id="screenIdnum" th:value="${accounts?.screenIdnum}"
                       class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">银行卡：</label>
            <div class="col-sm-8">
                <input type="text" name="screenNum" id="screenNum" th:value="${accounts?.screenNum}" class="form-control"
                       required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">手机预留号码：</label>
            <div class="col-sm-8">
                <input type="text" name="resphone" id="resphone" th:value="${accounts?.resphone}" class="form-control"
                       required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">总行名称：</label>
            <div class="col-sm-8">
                <input name="headBank" onclick="selectHeadBank()" th:value="${accounts?.bankHeadname}" readonly
                       id="headBank" type="text" placeholder="总行名称" class="form-control" required>
                <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">支行名称：</label>
            <div class="col-sm-8">
                <input name="branchBank" onclick="selectBranchBank()" th:value="${accounts?.bankName}" readonly
                       id="branchBank" type="text" placeholder="支行名称" class="form-control" required>
                <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
            </div>
        </div>
        <!--<div class="form-group">
            <label class="col-sm-3 control-label is-required">支付系统行号：</label>
            <div class="col-sm-8">
                <input type="text" name="subbranchId" id="bankNum" th:value="${accounts?.bankNum}" class="form-control"
                       required/>
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">账户开户地：</label>
            <div class="col-sm-2" style="width: 120px;">
                <select id="province" name="province" onchange="javascript:window.province('p')"
                        class="province form-control m-b" required>
                    <option value="">请选择</option>
                    <option th:each="p:${pList}" th:text="${p.areaName}" th:value="${p.areaCode}"
                            th:selected="${p.areaCode} eq ${province}"></option>
                </select>
            </div>
            <div class="col-sm-2" style="width: 120px;">
                <select id="city" name="city" onchange="javascript:window.province('c')" class="city form-control m-b"
                        required>
                    <option value="">请选择</option>
                    <option th:each="c:${cList}" th:text="${c.areaName}" th:value="${c.areaCode}"
                            th:selected="${c.areaCode} eq ${city}"></option>
                </select>
            </div>
            <!--<div class="col-sm-2" style="width: 120px;">
                <select id="area" name="area" onchange="javascript:window.province('a')" class="area form-control m-b" required>
                    <option value="">请选择</option>
                    <option th:each="a:${aList}" th:text="${a.areaName}" th:value="${a.areaCode}" th:selected="${a.areaCode} eq ${area}"></option>
                </select>
            </div>-->
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "agentInfo/agentInfo";
    $("#form-merchantInfo-updateBank").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/saveUpdateBank", $('#saveUpdateBank').serialize());
        }
    }

    function selectHeadBank() {
        var prefix1 = ctx + "merchantInfo/merchantInfo";
        var url = prefix1 + "/selectHeadBank/";
        $.modal.open("选择总行", url, '1000');
    }

    function selectBranchBank() {
        var headBank = $('#headBank').val();
        if ('' == headBank || undefined == headBank) {
            $.modal.msgError("请选择总行");
            return;
        }
        var prefix1 = ctx + "merchantInfo/merchantInfo";
        var url = prefix1 + "/selectBranchBank/" + headBank;
        $.modal.open("选择支行", url, '1000');
    }

    /**
     *
     * @param type 传入 省 p 市 c 区 a
     */
    function province(type) {
        var url = ctx + "area/area/list"; //获取地址信息
        if (type == 'p') {  //联动市
            if ($("#province").find("option:selected").val() == '') {
                defaultOption("city", "请选择");
                defaultOption("area", "请选择");
            } else {
                $.post(url, {'parentId': $("#province").val(), 'areaType': '1'}, function (result) {
                    if (result.code == '0') {
                        initSelect("city", result);
                    }
                });
            }
        } else if (type == 'c') {  //联动县
            $.post(url, {'parentId': $("#city").val(), 'areaType': '2'}, function (result) {
                if (result.code == '0', result) {
                    initSelect("area", result);
                }
            });
        }
    }

    //初始化 select选项
    function initSelect(selectId, data) {
        //清空旧的数据
        if (selectId == 'city') {
            $("#" + selectId).empty();
            $("#area").empty();
        } else {
            $("#" + selectId).empty();
        }
        var option = '<option value="">请选择</option>';
        data.rows.forEach(function (value) {
            option += "<option value='" + value.areaCode + "'>" + value.areaName + "</option>";
        });
        $("#" + selectId).append(option);
    }

    //初始化 select选项
    function defaultOption(selectId, text) {
        $("#" + selectId).empty();
        $("#" + selectId).append("<option value=''>" + text + "</option>");
    }


</script>
</body>
</html>